<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center addAddress_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub addAddress_fd0_0'>
					<view class='flex flex-wrap align-center addAddress_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  addAddress_fd0_0_c0_c0'>&#xe794;</text>
					</view>
					<text class='addAddress_fd0_0_c1'>添加地址</text>
					<view class='flex flex-wrap align-center addAddress_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---添加地址flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout addAddress_flex_1">
				<view class='flex flex-wrap align-center addAddress_fd1_0'>
					<text class='addAddress_fd1_0_c0'>姓名</text>
					<benben-input class='flex-sub addAddress_fd1_0_c1' type="text" :placeholder="`收货人`"
						confirm-type="done" :maxlength="50" placeholder-style="color:#BFBFBF;font-size:32rpx"
						v-model="real_name" />
					<benben-select-diy ref="showSelectPopup1694250216440" class-name='flex flex' :items.sync="sexType"
						v-model="sex_id" default-type="value" default-label="name" :allow-cancel='true' type="radio"
						:disabled='false'>
						<template v-for='(item,key0) in sexType'>
							<view v-if="item.isSelected" class='flex align-center flex addAddress_fd1_0_c2_c0'
								:key="key0" @tap="$refs.showSelectPopup1694250216440.tapHandle(key0)">
								<image class='addAddress_fd1_0_c2_c0_c0' mode="aspectFit" :src='STATIC_URL+"133.png"'>
								</image>
								<text class='addAddress_fd1_0_c2_c0_c1'>{{item.name}}</text>
							</view>
							<view v-else class='flex align-center flex addAddress_fd1_0_c2_c0' :key="key0"
								@tap="$refs.showSelectPopup1694250216440.tapHandle(key0)">
								<image class='addAddress_fd1_0_c2_c0_c0' mode="aspectFit" :src='STATIC_URL+"150.png"'>
								</image>
								<text class='addAddress_fd1_0_c2_c1_c1'>{{item.name}}</text>
							</view>
						</template></benben-select-diy>
				</view>
				<view class='flex flex-wrap align-center addAddress_fd1_1'>
					<text class='addAddress_fd1_0_c0'>电话</text>
					<benben-input class='flex-sub addAddress_fd1_1_c1' type="number" :placeholder="`联系电话`"
						confirm-type="done" :maxlength="11" placeholder-style="color:#BFBFBF;font-size:32rpx"
						v-model="mobile" />
				</view>
				<view class='flex flex-wrap align-center addAddress_fd1_2' @tap.stop="chooseAddressFunc()">
					<text class='addAddress_fd1_0_c0'>地区</text>
					<benben-input class='flex-sub addAddress_fd1_1_c1' type="text" :placeholder="`请选择省市区县、乡镇`"
						confirm-type="done" :maxlength="50" :disabled='true'
						placeholder-style="color:#BFBFBF;font-size:32rpx" v-model="address_code" />
					<image class='addAddress_fd1_2_c2' mode="aspectFit" :src='STATIC_URL+"233.png"'></image>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch addAddress_fd1_2'>
					<text class='addAddress_fd1_3_c0'>详细地址</text>
					<view class='flex flex-wrap'>
						<textarea class='flex addAddress_input_fd1_3_c1' confirm-type="done"
							:placeholder="'请填写详细地址：如道路、门牌号、小区、楼栋号等'" :maxlength="240"
							placeholder-style="color:#BFBFBF;font-size:28rpx" v-model="detail" />

					</view>
				</view>
				<view class='flex flex-wrap align-center justify-end addAddress_fd1_4'>
					<text class='addAddress_fd1_4_c0'>设为默认地址</text>
					<benben-switch v-model="is_default" default-color='#dcdfe6' color='#E31D1A' :disabled='false'
						:auto='true' size='96'>
					</benben-switch>
				</view>
			</view>

			<!---添加地址flex布局结束-->
			<view class="flex flex-direction flex-wrap align-center benben-position-layout flex addAddress_flex_2">
				<button class='addAddress_fd2_0' @tap.stop="sumbitFunc()">保存</button>

			</view>
			<view :style="{height: '148rpx'}"></view>
			<!--选择地址开始 -->
			<benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1679736779267"
				:label.sync='address_code' :province.sync='province' :city.sync='city' :area.sync='district'
				mode='region' :mask-show='true' :picker-height='88' :hide-area='false'>
				<template #picker-header>
					<view class='flex flex-wrap align-center justify-between addAddress_picker3_0'>
						<text class='addAddress_picker3_0_c0'
							@tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
						<text class='addAddress_picker3_0_c1'>选择地址</text>
						<text class='addAddress_picker3_0_c2'
							@tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
					</view>
				</template>
			</benben-picker>
			<!--选择地址结束 -->


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"pickerDiy1679736779267": false,
				"sexType": [{
					"name": "先生",
					"value": "1",
					"image": ""
				}, {
					"name": "女士",
					"value": "2",
					"image": ""
				}],
				"sex_id": "1",
				"real_name": "",
				"mobile": "",
				"detail": "",
				"is_default": false,
				"address_code": "",
				"province": "",
				"city": "",
				"district": "",
				"addressData": [],
				"lng": "",
				"lat": "",
				"a": {}
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			/**
			 * @returns 
			 * Android       安卓
			 * IOS       苹果
			 * Web       H5 或 pc
			 * Wechat       微信小程序
			 * Alipay       支付宝小程序
			 * Baidu       百度小程序
			 * ByteBounce       抖音小程序
			 * 360       360小程序
			 * FastApp       快应用
			 */
			appSystemIdentification() {
				return this.$store.state.appSystemIdentification
			}
		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//添加地址提交
			async sumbitFunc() {
				if (!validate(this.real_name, 'require')) {
					this.$message.info('姓名不能为空');
					return false;
				}
				if (!validate(this.sex_id, 'require')) {
					this.$message.info('性别不能为空');
					return false;
				}
				if (!validate(this.mobile, 'require')) {
					this.$message.info('电话不能为空');
					return false;
				}
				if (!validate(this.mobile, 'phone')) {
					this.$message.info('电话格式不正确');
					return false;
				}
				if (!validate(this.address_code, 'require')) {
					this.$message.info('地区不能为空');
					return false;
				}
				if (!validate(this.detail, 'require')) {
					this.$message.info('详细地址不能为空');
					return false;
				}
				if (this.is_default === true) {
					this.is_default = 1;
				} else {
					this.is_default = 0;
				}
				//请求方法
				//数据验证

				let dataaddressData = await this.$api.dbPost(global.apiUrls.post637defdbd53ef, {
					real_name: this.real_name,
					mobile: this.mobile,
					detail: this.detail,
					sex: this.sex_id,
					is_default: this.is_default,
					lng: this.lng,
					lat: this.lat,
					address_code: this.address_code,
					province: this.province,
					city: this.city,
					district: this.district
				});
				if (!dataaddressData) return
				if (dataaddressData.data.code != 1) {
					this.$message.info(dataaddressData.data.msg);
					return
				}
				let infoaddressData = dataaddressData.data;
				this.addressData = infoaddressData.data

				this.$message.info('添加成功');
				setTimeout(() => {
					this.$urouter.navigateBack(1);
				}, 500)
			},
			//选择位置
			chooseAddressFunc() {
				if (!this.setCheckPermission(7)) {
					return
				}
				if (this.appSystemIdentification == 'Web') {
					this.pickerDiy1679736779267 = true
				} else {
					let _this = this
					uni.getLocation({
						type: 'gcj02',
						geocode: true,
						success: (adr) => {
							uni.chooseLocation({
								latitude: adr.latitude,
								longitude: adr.longitude,
								success: (res) => {
									let reg = /.+?(省|市|自治区|自治州|行政区|盟|旗|县|区)/g // 省市区的正则
									if (res.address) {
										_this.address_code = res.address.match(reg)[0] + res.address.match(reg)[1] + (res.address.match(reg)[2] || '')
										_this.detail = res.address.replace(_this.address_code, '')
										_this.lat = res.latitude
										_this.lng = res.longitude
									} else {
										return
									}
								}
							})
						}
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto;
	}

	.addAddress_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.addAddress_fd0_0_c1 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.addAddress_fd0_0_c0_c0 {
		font-size: 32rpx;
		color: #333;
	}

	.addAddress_fd0_0_c0 {
		width: 120rpx;
		height: 88rpx;
	}

	.addAddress_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.addAddress_flex_1 {
		background: #fff;
		background-size: 100% auto !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.addAddress_fd1_4_c0 {
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.addAddress_fd1_4 {
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.addAddress_input_fd1_3_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		height: 119rpx;
		width: 100%;
	}

	.addAddress_fd1_3_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.addAddress_fd1_2_c2 {
		width: 14rpx;
		height: 22rpx;
	}

	.addAddress_fd1_2 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.addAddress_fd1_1_c1 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 45rpx;
	}

	.addAddress_fd1_1 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.addAddress_fd1_0_c2_c1_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #999999;
		margin: 0rpx 0rpx 0rpx 12rpx;
	}

	.addAddress_fd1_0_c2_c0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 0rpx 0rpx 12rpx;
	}

	.addAddress_fd1_0_c2_c0_c0 {
		width: 36rpx;
		height: 36rpx;
	}

	.addAddress_fd1_0_c2_c0 {
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.addAddress_fd1_0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		line-height: 110rpx;
		height: 110rpx;
	}

	.addAddress_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 32rpx 0rpx 0rpx;
		line-height: 45rpx;
	}

	.addAddress_fd1_0 {
		border-bottom: 1px solid #eee;
	}

	.addAddress_flex_2 {
		width: 750rpx;
		height: 148rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
	}

	.addAddress_fd2_0 {
		background: var(--benbenbgColor2);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 400;
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.addAddress_picker3_0_c2 {
		color: rgba(255, 0, 0, 1);
		font-size: 32rpx;
		font-weight: 400;
	}

	.addAddress_picker3_0_c1 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
	}

	.addAddress_picker3_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: var(--benbenFontColor1);
	}

	.addAddress_picker3_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 110rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}
</style>